<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间与车型表单</title>
    {% load static %}  <!-- 加载static标签库 -->
    <link rel='stylesheet' href="{% static 'css/my.css' %}" />
</head>
<body>
<!-- 添加form标签包裹表单元素 -->
<form id="queryForm" class="form-container" method="get" action="/submit/">
    <label>开始日期：</label>
    <div class="time-group">
        <input type="date" id="start_date" name="start_date">
        <select id="start_hour" name="start_hour" class="hour-select">
            <!-- 小时选项将通过JS生成 -->
        </select>
    </div>

    <label>结束日期：</label>
    <div class="time-group">
        <input type="date" id="end_date" name="end_date">
        <select id="end_hour" name="end_hour" class="hour-select">
            <!-- 小时选项将通过JS生成 -->
        </select>
    </div>

    <label>车型：</label>
    <input type="text" name="car_type" placeholder="请输入车型，为空则查询所有">
    <input type="submit" value="提交">

    <div class="error-message" id="timeError">错误：结束时间不能早于开始时间</div>
    <div class="divider"></div>
</form>
<!-- 在body中添加一个用于显示接收信息的区域 -->
<div class="info-display" id="infoDisplay"></div>
<div>
    <!-- 生成command_success_analysis.html后，在该div刷新显示这个html -->
    {% include "command_success_analysis.html" %}
</div>
<script>
    // 格式化日期为YYYY-MM-DD
    function formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    // 获取昨天的日期
    function getYesterday() {
        const yesterday = new Date();
        yesterday.setDate(yesterday.getDate() - 1);
        return yesterday;
    }

    // 获取今天的日期
    function getToday() {
        return new Date();
    }

    // 生成00:00到23:00的小时选项
    function populateHourOptions(selectId, defaultHour) {
        const select = document.getElementById(selectId);
        for (let i = 0; i < 24; i++) {
            const option = document.createElement('option');
            const hourStr = i.toString().padStart(2, '0');
            option.value = hourStr;
            option.textContent = `${hourStr}:00`;
            if (i === defaultHour) {
                option.selected = true;
            }
            select.appendChild(option);
        }
    }

    // 页面加载时设置默认日期和时间
    document.addEventListener('DOMContentLoaded', function() {
        // 设置开始时间为昨天的00:00
        const yesterday = getYesterday();
        document.getElementById('start_date').value = formatDate(yesterday);

        // 设置结束时间为今天的00:00
        const today = getToday();
        document.getElementById('end_date').value = formatDate(today);

        // 初始化小时选择器，开始时间00:00，结束时间00:00
        populateHourOptions('start_hour', 0);
        populateHourOptions('end_hour', 0);
    });

    // 表单提交处理（修改原click事件逻辑）
    document.querySelector('input[type="submit"]').addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认提交（关键：避免页面刷新）
        const errorElement = document.getElementById('timeError');
        errorElement.style.display = 'none';

        // 获取表单数据（保持原验证逻辑不变）
        const startDate = document.getElementById('start_date').value;
        const startHour = document.getElementById('start_hour').value;
        const endDate = document.getElementById('end_date').value;
        const endHour = document.getElementById('end_hour').value;
        const carType = document.querySelector('input[name="car_type"]').value;

        // 验证逻辑（保持不变）
        if (!startDate || !endDate) {
            alert('请选择完整的日期');
            return;
        }
        const startTime = new Date(`${startDate}T${startHour}:00`).getTime();
        const endTime = new Date(`${endDate}T${endHour}:00`).getTime();
        if (endTime <= startTime) {
            errorElement.style.display = 'block';
            document.getElementById('end_date').style.borderColor = '#dc3545';
            document.getElementById('end_hour').style.borderColor = '#dc3545';
            setTimeout(() => {
                document.getElementById('end_date').style.borderColor = '';
                document.getElementById('end_hour').style.borderColor = '';
            }, 3000);
            return;
        }

        // 关键：用AJAX异步提交数据
        const formData = new URLSearchParams();
        formData.append('start_date', startDate);
        formData.append('start_hour', startHour);
        formData.append('end_date', endDate);
        formData.append('end_hour', endHour);
        formData.append('car_type', carType);

        // 发起GET请求到/submit/
        fetch(`/submit/?${formData}`, {
            method: 'GET',
        })
        .then(response => response.json()) // 解析后端返回的JSON
        .then(data => {
            // 在页面上显示接收的信息
            const infoDisplay = document.getElementById('infoDisplay');
            infoDisplay.innerHTML = `
                <p>接收的信息：</p>
                <p>开始时间：${data.start_time}</p>
                <p>结束时间：${data.end_time}</p>
                <p>车型：${data.car_type || '未输入'}</p>
            `;
            infoDisplay.style.marginTop = '10px';
            infoDisplay.style.padding = '10px';
            infoDisplay.style.border = '1px solid #4285f4';
        })
        .catch(error => {
            console.error('提交失败：', error);
        });
    });

    // 当结束时间输入变化时，清除错误状态
    document.getElementById('end_date').addEventListener('change', function() {
        this.style.borderColor = '';
        document.getElementById('timeError').style.display = 'none';
    });

    document.getElementById('end_hour').addEventListener('change', function() {
        this.style.borderColor = '';
        document.getElementById('timeError').style.display = 'none';
    });
</script>
</body>
</html>